<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-top-stats>
				<el-row>
					<el-col :span="5">
						<div class="qr base-flex">
							<img :src="subData.qrcodeUrl" alt />
							<div>
								<p>我的推广二维码</p>
								<el-button size="mini" @click="downloadCodeImg"
									>下载二维码</el-button
								>
							</div>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="qr base-flex">
							<img :src="subData.qrcodeCircleUrl" alt />
							<div>
								<p>小程序二维码</p>
								<el-button size="mini" @click="downloadCodeImg2"
									>下载二维码</el-button
								>
							</div>
						</div>
					</el-col>
					<el-col :span="5">
						<div class="commission">
							<p>预估结算佣金</p>
							<span
								>{{ moment(params.startTime).format('YYYY-MM-DD') }} -
								{{ moment(params.endTime).format('YYYY-MM-DD') }}</span
							>
							<p>￥{{ subData.settleCommissionTotal || 0 }}</p>
						</div>
					</el-col>
					<el-col :span="5">
						<div class="user">
							<p>新增用户</p>
							<span
								>{{ moment(params.startTime).format('YYYY-MM-DD') }} -
								{{ moment(params.endTime).format('YYYY-MM-DD') }}</span
							>
							<p>{{ subData.newUserNum || 0 }}</p>
						</div>
					</el-col>
					<el-col :span="5">
						<div class="tip">
							<p class="one">
								<span>什么是预估佣金？</span>用户付款完成后所产生的预估佣金
							</p>
							<p><span>什么是预估结算佣金？</span>用户确认收货后所产生的佣金</p>
						</div>
					</el-col>
				</el-row>
			</template>
			<template #slot-top-mask>
				<div class="mask"></div>
			</template>
			<template #slot-datepicker>
				<date-picker
					style="margin-left:10px"
					@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
					@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
				></date-picker>
				<el-button @click="orderExport" type="primary" style="margin-left:10px" size="mini">
					<i class="el-icon-download"></i>导出报表
				</el-button>
			</template>
			<template #table-column-date="{ scope }">
				<span>{{ moment(Number(scope.row.date)).format('YYYY-MM-DD') }}</span>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import moment from 'moment';
import { dateFormat, download } from '@/utils/index';
export default {
	data() {
		return {
			params: {
				page: 1,
				size: 20,
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			},
			subData: {
				settleCommissionTotal: '0.00',
				newUserNum: 0
			}
		};
	},
	components: {
		DatePicker
	},
	methods: {
		moment,
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.goodsMenagement.jljWechatReport)
				.set('dict', {
					api: {
						page: 'channelReport'
					}
				})
				.set('table', {
					columns: [
						{
							label: '日期',
							prop: 'date',
							align: 'center'
						},
						{
							label: '渠道名称',
							prop: 'channelName',
							align: 'center'
						},
						{
							label: '新增用户',
							prop: 'newUserNum',
							align: 'center',
							width: 200
						},
						{
							label: '有效订单',
							prop: 'validOrderNum',
							align: 'center'
						},
						{
							label: '浏览量',
							prop: 'PV',
							align: 'center'
						},
						{
							label: '活跃访客',
							prop: 'UV',
							align: 'center'
						},
						{
							label: '失效订单',
							prop: 'invalidOrderNum',
							align: 'center'
						},
						{
							label: '预估佣金',
							prop: 'validCommissionTotal',
							align: 'center'
							// emptyText: '无'
						},
						{
							label: '失效佣金',
							prop: 'invalidCommission',
							align: 'center'
						},
						{
							label: '预估结算佣金',
							prop: 'settleCommissionTotal',
							align: 'center'
						},
						{
							label: '礼金消耗',
							prop: 'tljMoney',
							align: 'center'
						}
					],
					op: {
						visible: false
					}
				})
				.set('layout', [
					['slot-top-stats'],
					['slot-top-mask'],
					['refresh-btn', 'slot-datepicker', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.params = params;
					const { list, subdData } = await next({ ...params });
					this.subData = subdData;
				})
				.done();

			app.refresh({
				...this.params
			});
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		orderExport() {
			this.$service.goodsMenagement.jljWechatReport
				.jljWxChanneExport(this.params)
				.then(res => {
					download({
						data: res,
						fileName: `渠道数据-${moment().format('YYYY-MM-DD HH:mm:ss')}`
					});
				});
		},
		downloadCodeImg() {
			console.log('下载图片');
			var a = document.createElement('a');
			a.download = name || 'pic';
			// 设置图片地址
			a.href = this.subData.qrcodeUrl;
			a.click();
		},
		downloadCodeImg2() {
			console.log('下载图片');
			var a = document.createElement('a');
			a.download = name || 'pic';
			// 设置图片地址
			a.href = this.subData.qrcodeCircleUrl;
			a.click();
		}
	}
};
</script>

<style lang="scss" scoped>
.number {
	flex: 1;
}
.mask {
	width: 100%;
	height: 10px;
	background: $bg-grey;
}
.tip {
	flex: 2;
	// text-align: center;
	p {
		span {
			font-weight: bold;
			margin-right: 10px;
		}
	}
	.one {
		margin-bottom: 40px;
	}
}
.commission {
	margin-left: 40px;
}
.commission,
.user {
	width: 300px;
	// flex: 1;
	text-align: center;
	p {
		font-size: 20px;
		font-weight: bold;
	}
	span {
		display: block;
		margin-bottom: 20px;
	}
}
.qr {
	img {
		width: 100px;
		height: 100px;
		margin-right: 10px;
	}
	p {
		font-size: 20px;
		font-weight: bold;
	}
	.btn {
		padding: 10px;
		background: #4db7f3;
		border-radius: 5px;
		text-align: center;
		color: white;
		margin-top: 25px;
		cursor: pointer;
	}
}
</style>
